<template>
  <view v-if="shenheStatus == 0" class="content">
    <view class="list" v-if="items.length">
      <view
        class="item"
        v-for="item of items"
        :key="item.id"
        @click="$utils.toUrl(`/goods/goods/goods?id=${item.id}`)"
      >
        <view class="img">
          <image :src="item.cover_pic" mode="aspectFill"></image>
        </view>

        <view class="con">
          <view class="name">{{ item.name }}</view>

          <view class="price">
            <view class="price1">
              <text class="s1">{{ getPrice(item.price)[0] }}</text>
              <text>.{{ getPrice(item.price)[1] }}</text>
            </view>
            <view class="price2">{{ item.original_price }}</view>
          </view>

          <view class="num">月售 {{ item.sales_num }}</view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
      items: [],
    };
  },

  computed: {
    getPrice() {
      return (price) => {
        if (!price) return ["0", "00"];
        return price.split(".");
      };
    },
  },

  methods: {
    async getIndex() {
      const res = await this.$allrequest.shareholder.defaultLevelGoods();
      if (res.code == 0) {
        this.items = res.data.goods || [];
      }
    },
  },

  onShow() {
    this.getIndex();
  },
};
</script>

<style lang="scss" scoped>
.list {
  padding: 24rpx;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20rpx 0;

  &:after {
    content: "";
    position: absolute;
    left: 212rpx;
    bottom: 0;
    right: 0;
    height: 2rpx;
    background: #f5f6f7;
  }
}

.img {
  width: 192rpx;
  height: 192rpx;

  image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
  }
}

.con {
  margin-left: 20rpx;
  flex: 1;
  overflow: hidden;
}

.name {
  display: -webkit-box;
  white-space: normal;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  overflow: hidden;
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;
}

.price {
  display: flex;
  align-items: flex-end;
  padding: 10rpx 0;
  font-size: 24rpx;
  line-height: 1;

  view {
    margin-right: 8rpx;

    &:before {
      content: "￥";
    }
  }

  .price1 {
    color: #f0250e;
    font-weight: bold;

    .s1 {
      font-size: 38rpx;
    }
  }

  .price2 {
    position: relative;
    color: #8c8c8c;

    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      right: 0;
      height: 1px;
      background: #8c8c8c;
    }
  }
}

.num {
  color: #8c8c8c;
  font-size: 24rpx;
}
</style>
